import React from "react";
import ReactDOM from "react-dom/client";
import reportWebVitals from "./reportWebVitals.js";
import "./mp-design-tokens/__import.css";

import Card from "./components/Card.jsx";
import Switch from "./components/Switch.jsx";
import Button from "./components/Button.jsx";
import Stack from "./components/Stack.jsx";
import Divider from "./components/Divider.jsx";
// import Icon from "./components/Icon.jsx";
import List from "./components/List.jsx";
import Text from "./components/Text.jsx";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <Text text="React" textStyle="h2" />
    <Stack>
      <Card width="100%">
        <List
          title="Label"
          subtitle="There should be a text label linked with the checkbox field. Clicking the label should also trigger the checkbox selection. If the label is not rendered on the page, assistive technologies should still announce it."
        >
          <Switch />
        </List>
        <Divider />
        <List
          title="Label"
          subtitle="There should be a text label linked with the checkbox field. Clicking the label should also trigger the checkbox selection. If the label is not rendered on the page, assistive technologies should still announce it."
        >
          <Button iconLeft="home" text="Primary" />
        </List>
        <Divider />
        <List
          title="Label"
          subtitle="There should be a text label linked with the checkbox field. Clicking the label should also trigger the checkbox selection. If the label is not rendered on the page, assistive technologies should still announce it."
        >
          <Button buttonStyle="secondary" iconLeft="home" text="Primary" />
        </List>
        <Divider />
        <List
          title="Label"
          subtitle="There should be a text label linked with the checkbox field. Clicking the label should also trigger the checkbox selection. If the label is not rendered on the page, assistive technologies should still announce it."
        >
          <Button buttonStyle="text" iconLeft="home" text="Primary" />
        </List>
        <Divider />
        <List
          title="Label"
          subtitle="There should be a text label linked with the checkbox field. Clicking the label should also trigger the checkbox selection. If the label is not rendered on the page, assistive technologies should still announce it."
        >
          <Button buttonStyle="danger" iconLeft="home" text="Primary" />
        </List>
      </Card>
    </Stack>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
